<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
<div>
    <div class="main-container">
        <div class="main-box">hello world</div>
        <div class="dark-box">hello world</div>
        <div class="light-box">hello world</div>
    </div>
    <input type="text" id="time">
    <button onclick="hello()">click</button>
    <button onclick="changeTheme()">change theme</button>
</div>
<script>
    const $html = document.querySelector('html');
    const themeClasses = ['','dark-theme','light-theme'];
    let index = 0;
    function changeTheme(){
        index++;
        if(index===3){
            index = 0;
        }
        $html.setAttribute('class',themeClasses[index]);
    }
    function hello(){
        const worker = new Worker('worker.js');
        // worker.onerror = (event)=>{
        //     console.log(event)
        // }
        worker.onmessage = (event)=>{
            console.log('收到消息1')
            console.log(JSON.parse(event.data))
        }
        worker.onmessageerror = (event)=>{
            console.log(event);
        }
        console.log('发送消息1');
        worker.postMessage(['hello']);
        // setTimeout(()=>{
        //     console.log('.5s后取消!0');
        //     worker.terminate();
        // },500)
    }
</script>
</body>
</html>